<template>
  <div class="topside">
    <div class="topside-wrap">
      <div class="topsidelist">
        <el-tag :type="getTagType('/index')" size="medium" @click="router('index')">{{ $t('other.home') }} </el-tag>
        <template v-for="tag in history">
          <el-tag :key="tag.path" :type="getTagType(tag.path)" size="medium" @click="router(tag)" @close="close(tag)" @contextmenu.prevent.native="openMenu(tag,$event)" closable>{{ $t(tag.meta.title) }} </el-tag>
        </template>
      </div>
      <div class="topsidebtn">
        <el-button icon="el-icon-arrow-left" @click="forward"></el-button>
        <el-button icon="el-icon-arrow-right" @click="back"></el-button>
      </div>
    </div>

    <ul v-show="contextMenuFlag" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
      <!-- <li @click="refreshSelectedTag(selectedTag)"><i class="el-icon-refresh-right"></i> 刷新页面</li> -->
      <li @click="closeSelectedTag(selectedTag)"><i class="el-icon-close"></i> {{$t('other.closeActive')}}</li>
      <li @click="closeOthersTags"><i class="el-icon-circle-close"></i> {{$t('other.closeOther')}}</li>
      <li v-if="isActiveView(selectedTag)" @click="closeLeftTags"><i class="el-icon-back"></i> {{$t('other.closeLeft')}}</li>
      <li v-if="isActiveView(selectedTag)" @click="closeRightTags"><i class="el-icon-right"></i> {{$t('other.closeRight')}}</li>
      <li @click="closeAllTags(selectedTag)"><i class="el-icon-circle-close"></i> {{$t('other.closeAll')}}</li>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
import bus from '../../bus/bus'
import { mapActions } from 'vuex'

export default {
  name: '',
  data() {
    return {
      tags: [],
      index: 0,
      oldroute: {},
      contextMenuFlag: false,
      top: 0,
      left: 0,
      selectedTag: {},
      history: []
    }
  },
  methods: {
    getTagType(path) {
      if (this.$route.path !== path) {
        return 'info'
      }
    },
    isActiveView(tag) {
      return this.$route.name == tag.route
    },
    closeAllTags() {
      this.history = []
      this.$router.push('/index')
    },
    closeRightTags() {
      const tag = this.selectedTag
      const index = this.history.findIndex(item => item.route == tag.route)
      this.history.splice(index + 1)
    },
    closeLeftTags() {
      const tag = this.selectedTag
      const index = this.history.findIndex(item => item.route == tag.route)
      this.history.splice(0, index - 1)
    },
    closeOthersTags() {
      const tag = this.selectedTag
      this.history = [tag]
      this.$router.push({ name: tag.route })
    },
    closeSelectedTag(tag) {
      const index = this.history.findIndex(item => item.route == tag.route)
      this.history.splice(index, 1)
      if (index == 0) {
          this.$router.push('/index')
      } else {
        if (this.$route.name == tag.name) {
          this.$router.push({ name: this.history[index - 1].route })
        }
      }
    },
    refreshSelectedTag(tag) {
      this.pageReload()
    },
    openMenu(tag, e) {
      const menuMinWidth = 105
      const offsetWidth = this.$el.offsetWidth // container width
      const maxLeft = offsetWidth - menuMinWidth // left boundary
      const left = e.clientX - 45 // 15: margin right
      if (left > maxLeft) {
        this.left = maxLeft
      } else {
        this.left = left
      }
      this.top = e.clientY + 10
      this.contextMenuFlag = true
      this.selectedTag = tag
    },
    closeMenu() {
      this.contextMenuFlag = false
    },
    ...mapActions({
      switchFrame: 'frameSwitch'
    }),
    forward() {
      let box = document.querySelector('.topsidelist')
      let boxWidth = box.clientWidth
      let scroll = box.scrollWidth
      if (scroll > boxWidth) {
        box.scrollLeft = box.scrollLeft - 50
      }
    },
    back() {
      let box = document.querySelector('.topsidelist')
      let boxWidth = box.clientWidth
      let scroll = box.scrollWidth
      if (scroll > boxWidth) {
        if (box.scrollLeft + 50 >= scroll) {
          box.scrollLeft = scroll
        } else if (box.scrollLeft + 50 < scroll) {
          box.scrollLeft = box.scrollLeft + 50
        }
      }
    },
    close(tag) {
      bus.$emit('clearCache', tag)
      const index = this.history.findIndex(item => item.name == tag.name)
      if (this.$route.path == tag.path) {
        if (index > 0) {
          this.$router.push(this.history[index - 1])
        } else {
          this.router('index')
        }
      }
      this.history.splice(index, 1)
    },
    router(tag) {
      if (tag.name === 'appiframe' || tag.name === 'iframe' || tag.meta?.ext) {
        this.$store.commit('setFrameShow', false)
      } else {
        this.$store.commit('setFrameShow', true)
      }
      if (tag == 'index') {
          this.$router.push('/index')
      } else {
        this.$router.push(tag)
      }
    }
  },
  mounted() {
    
  },
  components: {},
  watch: {
    $route: {
      handler(data, oldData) {
        if (['/static', '/index'].includes(data.path)) {
          return
        }
        if (
          data.name != 'iframe' &&
          data.name != 'appiframe' &&
          data.meta.flag === false
        ) {
          const index = this.history.findIndex(
            item =>
              item.name == data.name ||
              item.path == data.path ||
              item.meta?.title == data.meta?.title
          )
          if (index > -1) {
            this.history[index] = data
          } else {
            this.history.push(data)
          }
        }
      },
      immediate: true,
      deep: true
    },
    tags(data) {
      setTimeout(() => {
        let box = document.querySelector('.topsidelist')
        let boxWidth = box.clientWidth
        let scroll = box.scrollWidth
        if (scroll > boxWidth) {
          box.scrollLeft = box.scrollWidth
        }
      }, 100)
    },
    contextMenuFlag(value) {
      if (value) {
        document.body.addEventListener('click', this.closeMenu)
      } else {
        document.body.removeEventListener('click', this.closeMenu)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.topside-wrap {
  width: 100%;
  height: 100%;
  padding: 6px 0;
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

.topsidelist {
  overflow-x: auto;
  display: flex;
  flex-wrap: nowrap;
  flex: 1;
  .el-tag{
    cursor: pointer;
    margin-right: 10px;
  }
}

.topsidelist::-webkit-scrollbar {
  display: none;
}

.topsidebtn {
  margin-left: 10px;
  height: 100%;
}
.contextmenu {
  margin: 0;
  background: #fff;
  z-index: 3000;
  position: absolute;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
  li {
    margin: 0;
    padding: 7px 16px;
    cursor: pointer;
    &:hover {
      background: #eee;
    }
  }
}
</style>
